<template>
  <el-dialog title="添加字段"
             width="50%"
             :visible="isShow"
             @close="reset">
    <el-form :model="forminfo"
             ref="form"
             :rules="rules"
             label-width="100px"
          >
      <el-row>
        <el-col :span="12">
          <el-form-item label="中文说明"
                        prop="attr_name">
            <el-input v-model="forminfo.attr_name"
                      placeholder="请输入中文名，如：支付秘钥"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段键名"
                        prop="attr_key">
            <el-input v-model="forminfo.attr_key"
                      placeholder="请输入英文名，如：pay_key"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属分类"
                        prop="tab_value">
            <el-select v-model="forminfo.tab_value"
                       @change="tabChange"
                       clearable
                       allow-create
                       placeholder="请选择tab名">
              <el-option v-for="item in tabValue"
                         :key="item.key"
                         :label="item.name"
                         :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属分组"
                        prop="group_value">
            <el-select v-model="forminfo.group_value"
                       filterable
                       clearable
                       allow-create
                       placeholder="请选择,可直接创建">
              <el-option v-for="(item,index) in attrGroupList"
                         :key="index"
                         :label="item.name"
                         :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段类型"
                        prop="type">
            <el-select v-model="forminfo.type"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in formType"
                         :key="item.key"
                         :label="item.value"
                         :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提示文字"
                        prop="placeholder">
            <el-input v-model="forminfo.placeholder"
                      placeholder="如：请输入xx / 请选择xx"></el-input>
          </el-form-item>
        </el-col>
         <!-----------------------------备选项------------------------------------>
        <el-col :span="24">
          <el-form-item  label="备选项"  v-if="[4,5].includes(forminfo.type)">
            <el-input  v-model="forminfo.config_value"
                      placeholder="请输入可选项，格式如：label=value&label=value 如 是=1&否=2"
                      type="textarea"
                      rows="2"></el-input>
          </el-form-item>
        </el-col>
        <!-----------------------------默认值------------------------------------>
        <el-col :span="24">
          <!-- 单行 多行 默认值 -->
          <el-form-item label="默认值"
                        v-if="[1,2,3,4].includes(forminfo.type)">
            <el-input type="textarea"
                      v-model="forminfo.attr_value"
                      :placeholder="forminfo.type===4 ? '上面可选项里面的value值':'请输入默认值'"></el-input>
          </el-form-item>
          <!-- 多选默认值 -->
          <el-form-item label="默认值"
                        v-if="forminfo.type===5">
            <el-input v-model="forminfo.attr_value"
                      placeholder="请输入上面可选项里面的value值，多个用英文逗号隔开"></el-input>
          </el-form-item>
          <!-- 时间默认值  -->
          <el-form-item label="默认时间"
                        v-if="forminfo.type===6">
            <el-time-picker
                            v-model="forminfo.attr_value"
                            placeholder="选择时间"></el-time-picker>
          </el-form-item>
          <!-- 日期默认值 -->
          <el-form-item label="默认日期"
                        v-if="forminfo.type===7">
            <el-date-picker type="date"
                            v-model="forminfo.attr_value"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <!-- 默认日期时间 -->
          <el-form-item label="默认日期时间"
                        v-if="forminfo.type===8">
            <el-date-picker type="datetime"
                            v-model="forminfo.attr_value"
                            placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <!-----------------------------校验规则------------------------------------>
        <el-col :span="24">
          <el-form-item  label="校验规则">
            <el-input  placeholder='请参见element-ui表单字段校验规则：形如[{"required":true,"message":"站点名必须","trigger":"blur"}],注意是JSON字符串，属性名需要引号'
                      v-model="forminfo.validator"
                      type="textarea"
                      rows="4"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="是否可删除">
            <el-switch v-model="forminfo.can_delete" :active-value="1" :inactive-value="0" inactive-text="不可删" active-text="可删除">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="显示权重">
             <el-input-number size="small" v-model="forminfo.sort_num"  :min="1" :max="10" label="描述文字"></el-input-number>
             <p style="font-size:12px;color:#aaa;">越大，越往后放</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="small" type="primary"
                 @click="add">确定</el-button>
      <el-button size="small" @click="reset">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addConfig } from '@/api/system/config'
import { formType, tabValue } from '@/api/constant/config'
const defaultItem = {
  tab_value: '', // 大Tab名称
  group_value: '', // 分组名称
  attr_key: '', // key名
  attr_value: '', // 数据值
  attr_name: '', // 中文描述
  placeholder: '', // 提示文字
  type: '', // 类型
  config_value: '', // 备选项
  validator: '', // 校验规则
  can_delete: 0, // 是否可以删除
  sort_num: 10 // 显示权重
}
export default {
  data () {
    return {
      isShow: false,
      formType, // 控件类型
      tabValue, // 大分组
      attrGroupList: [], // 小分组
      forminfo: { ...defaultItem },
      rules: {
        tab_value: [{ required: true, message: '选择tab名', trigger: 'blur' }],
        group_value: [{ required: true, message: '选择分组', trigger: 'blur' }],
        attr_key: [{ required: true, message: '请输入英文名', trigger: 'blur' }],
        attr_name: [{ required: true, message: '请输入中文名', trigger: 'blur' }],
        type: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
        config_value: [{ required: true, message: '请输入选项值', trigger: 'blur' }]
      }
    }
  },
  props: {
    // 完整数据
    list: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    tabChange (v) {
      // 小分组清空
      this.attrGroupList = []
      this.forminfo.group_value = ''
      // 获取对应小分组
      const Tab = this.list.find(item => item.key === v)
      this.attrGroupList = Tab.children
    },
    add () {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.error('验证失败')
        let validator = ''
        this.forminfo.validator && (validator = JSON.stringify(this.forminfo.validator))
        await addConfig({ ...this.forminfo, validator })
        this.$message.success('创建配置成功')
        this.isShow = false
        this.$emit('update')
      })
    },
    reset () {
      this.isShow = false
      this.forminfo = { ...defaultItem }
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style scoped>
</style>
